<template>
  <div class="back">
  <div class="container">

    <p style="font-size:20px;color:white;text-align:left;">●已绑定：</p>
    <br>
    <div class='person' v-for="(man,i) in object.list" v-bind:key="i">
      <img src="@/assets/身份证.png" class = "idcard"/>
<!--      <p>id{{man.id}}</p>--><p>id:</p>
      <p>姓名：{{man.name}}</p>
      <p>护理等级：{{ man.age }}</p>
    </div>

  </div>
  <div class="container">
   <p style="font-size: 15px;color: white">请选择：
      <select  @input = "get($event)">
        <option></option>
        <option v-for="(man,i) in object.list" v-bind:key="i">{{man.name}}</option>
      </select>
   </p>
    <br><br>
    <img src = "@/assets/打卡按钮.png" style="height: auto;width: 5%" @click="clock"/>
  </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      object : JSON.parse(this.$route.query.obj),
      select_man :'',
    }
  },
  methods:{
    get(event){
        this.select_man =  event.target.value;
    },
    clock(){
      //打卡
      alert("√打卡成功！\n您的护理对象："+this.select_man)
    }
  }
}
</script>

<style scoped>
.container{
  width: 80%;
  height: auto;
  background: white;
  margin-left: 10%;
  margin-top: 30px;
  /*opacity: 0.3;*/
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height:40%;
}

.back{
  background:url("http://cdn-dlut.supwisdom.com/student/static/common-home/img/theme1.jpg");
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: fixed;
  top: 0px; /*这里是设置与顶部的距离*/
  left: 0px; /*这里是设置与左边的距离*/
  bottom: 0px;
  right: 0px;

}
.person {
  background: #cce5ff;
  width: 13%;
  height: auto;
  margin-left: 4%;
  float: left;
  border-radius: 20px;
}
.idcard{
  width: 80%;
  height: auto;
  margin-left: 10%;
}
.operate{
  background: pink;
  /*background: rgba(0, 0, 0, 0.3);*/
  width: 60%;
  height: auto;
  margin-left: 20%;

}
</style>